<template>
    <u-popup :show="isPopup" :round="15" mode="bottom" @close="onClose" :closeable="false">
        <view class="botMenuWrap">
            <view class="flex center" style="padding: 40rpx; border-bottom: 1px solid #F5F5F5;">
                <view></view>
                <view class="popTitle">{{ title }}</view>
                <!-- <view style="padding: 10rpx">
                  <u-icon name="close" :bold="true" @click="onClose"/>
              </view> -->
            </view>
            <view class="flex flex-column center" :closeOnClickOverlay="true"
                overlayStyle="{background: 'rgba(3, 100, 219, 0)'}">
                <view style="width: 100%;">
                    <slot></slot>
                </view>
                <view class="botBtn center" v-if="showCancel" @click="onClose">
                    取消
                </view>
            </view>
        </view>
    </u-popup>
</template>
<script>
export default {
    name: "BotMenu",
    data() {
        return {

        }
    },
    props: {
        isPopup: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: "",
        },
        showCancel: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        onClose() {
            this.$emit("close")
        }
    }
}

</script>

<style scoped lang="scss">
.botMenuWrap {
    .popTitle {
        color: #333;
        font-size: 32rpx;
        font-weight: bold;
    }

    .shadowWrap {
        box-shadow: 0px 4px 12px 0px #00000014;
        border-radius: 24rpx;
    }

    .botBtn {
        width: 100%;
        padding: 28rpx;
        border-top: 6rpx solid #F2F2F2;
    }
}
</style>
